<?php
$title = "PSL  Table";

function renderForm() {
    echo "<div id='result_form_div'>";
    echo ("       <form id='calcUpdate_form' action='calc_and_update.php' method='GET' >");
    $con = new mysqli("localhost", "root", "", "soccer_2013");
    if ($con->connect_errno) {
        echo "Failed to connect to MySQL: " . $con->connect_errno;
    } else {
        $tQuery = "SELECT id, full_name, manager, venue FROM teams";
        $result = $con->query($tQuery);
        $row = $result->fetch_array();
        echo ("<select name='team1'>");
        mysqli_data_seek($result, 0);
        while ($row = $result->fetch_array()) {

            echo "<option value='$row[0]'>" . $row[1] . "</option>";
        }
        echo ('</select>');
        echo ("<select name='team1score'>");
        for ($r = 0; $r < 10; $r++) {

            echo "<option value='$r' >$r</option>";
        }
        echo ('</select><br />');
        echo ("<select name='team2'>");
        mysqli_data_seek($result, 0);
        while ($row = $result->fetch_array()) {

            echo "<option value='$row[0]'>" . $row[1] . "</option>";
        }
        echo ('</select>');
        echo ("<select name='team2score'>");
        for ($r = 0; $r < 10; $r++) {

            echo "<option value='$r'>$r</option>";
        }
        echo ('</select>');
    }
    $con->close();
    // echo ("<br /><input type='submit' />"); Rf6TR7tF9wB6
    echo ("</form>");
}

function renderTable() {
    echo "<div id='psl_div'>";
    echo (" ");
    $con = new mysqli("localhost", "root", "", "soccer_2013");
    if ($con->connect_errno) {
        echo "Failed to connect to MySQL: " . $con->connect_errno;
    } else {
        $tQuery = "SELECT full_name, played, won, drawn, played - (won + drawn), (3*won)+drawn FROM psl, teams WHERE team_id=id" ;
        $result = $con->query($tQuery);
        echo ("<table>");
        echo ("<tr><th>Team name</th><th>Played</th><th>Won</th><th>Drawn</th><th>Lost</th><th>Points</th></tr>");

        while ($row =$result->fetch_array()) {
           
                echo ("<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td><td>$row[3]</td><td>$row[4]</td><td>$row[5]</td></tr>");
      
        }
        echo ("</table>");
    }
}

echo "</div> <!--psl_div -->";
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title><? echo $title ?></title>
        <link type='text/css' href='css/jquery-ui-1.10.3.custom.css' rel='stylesheet' >
        <script type='text/javascript' src='js/jquery-1.9.1.js'></script>
        <script type='text/javascript' src='js/jquery-ui-1.10.3.custom.js'></script>
        <script type='text/javascript'>
            $('document').ready(function() {
                $("#result_form_div").hide();
                //YOUR FIRST JQuery-UI interaction
                $('button').button();
                $('#addResult_b').click(function() {
                    $("#result_form_div").show();
                    $('#result_form_div').dialog('open');
                });
                $('.oldStyle').button();
                //Real magic, make div into a dialog box
                $('#result_form_div').dialog({
                    title: "Team Results",
                    autoOpen: false,
                    buttons: [
                        {
                            text: "Close", click: function() {
                                $('#result_form_div').dialog('close');
                            }
                        },
                        {
                            text: "Submit", click: function() {
                                // Notice this a jquery way to submit a form
                                $('#calcUpdate_form').submit();
                                //if successful don't forget to close the form
                                $('#result_form_div').dialog('close');
                            }
                        }]
                });
            });
        </script>
    </head>
    <body>
        <h1> <? echo $title; ?></h1>
        <? echo renderTable(); ?>
        <button id="addTeam_b">Add a team</button>
        <button id="addResult_b">Add a result</button>
<? echo renderForm(); ?>
    </body>
</html>